<template>
  <div class="parent">
    <h3>父组件 —— 我的房产：{{n}}</h3>
		<button @click="$refs.c1.computerNumber -= 1">减少1台电脑</button>
		<button @click="$refs.c2.toyNumber -= 10">减少10个玩具</button>
		<button @click="xueba">所有孩子+5本书</button>

    <Child1 ref="c1"/>
    <Child2 ref="c2"/>
  </div>
</template>

<script>
import Child1 from './Child1'
import Child2 from './Child2'

export default {
  name: 'Index',
	components: {Child1,Child2},
	data() {
		return {
			n:5
		}
	},
	methods: {
		xueba(){
			this.$children.forEach((c)=>{
				c.book += 5
			})
		}
	},
}
</script>

<style lang="less" scoped>
	.parent{
		background-color: rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
		button{
			margin-bottom: 10px;
			margin-left: 10px;
		}
	}
</style>

